{{-- 首页页面 子视图 --}}
@extends('layouts.home')

@section('title', '留言')

{{-- 设置token -- ajax请求必须需要 --}}
<meta name="csrf-token" content="{{ csrf_token() }}">

{{-- 页面独立的css文件 --}}
@push('css')
    <link rel="stylesheet" href="{{ URL::asset('assets/css/home.css') }}">
@endpush
@section('content')
    {{--  顶部导航  --}}
    @include('common.navbar')
    <section class="slice-lg">
        <div class="container">
            <div class="row align-items-center cols-xs-space cols-sm-space cols-md-space">
                <div class="col-lg-6">
                    <h3 class="heading h3 mb-4">给我留言📝</h3>
                    <form class=" wow fadeInUp" data-wow-delay="200ms" style="margin-top: 3rem" id="contactForm">
                        @csrf
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <input class="form-control" placeholder="您的姓名" name="name" id="name"
                                        type="text" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <input class="form-control" placeholder="您的邮箱地址" name="email" id="email"
                                        type="email" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-8">
                                <div class="form-group">
                                    <input class="form-control" placeholder="请输入验证码" name="verification_code"
                                        id="verification_code" required>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="form-group">
                                    <button type="button" id="send-code-btn"
                                        class="btn btn-sm btn-primary btn-action">发送验证码</button>
                                </div>
                            </div>

                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <textarea class="form-control" rows="5" name="content" id="content" placeholder="请输入内容......" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="mt-4">
                            <button type="submit" id="contact_btn" class="btn btn-primary px-4">
                                留言
                            </button>
                        </div>
                    </form>
                </div>

                <div class="col-lg-5 ml-lg-auto">
                    {{-- <h3 class="heading heading-3 strong-300">
                        联系我
                    </h3> --}}
                    <p class="lead mt-4 mb-4">
                        {{-- Email: <a href="#">Lattiex@outlook.com</a>
                        <br>
                        QQ: 1625116337 --}}
                        <br>
                        Address: 翻斗大街翻斗花园2号楼1001室
                    </p>
                    <p class="">
                        不服来打，我家住在翻斗大街翻斗花园。
                    </p>
                </div>

                {{-- 留言内容部分 --}}
                <div class="col-lg-12">
                    <h3 class="heading h3 mb-4" style="padding-top: 2rem"><i class="fa fa-anchor"></i> 留言数量 <span
                            style="color: #7272f5">{{ $count }}</span></h3>
                    <div id="comments_msg">
                        @include('home.contact_msg')
                    </div>
                </div>
            </div>
            {{-- 显示分页器 --}}
            {{ $message->links('home.contact_pagination') }} <!-- 显示分页链接 -->
        </div>
    </section>

    {{-- @include('common.gift') --}}

    {{--  底部导航  --}}
    {{-- @include('common.footer') --}}
@endsection

@push('script')
    <script>
        // 监听分页器链接的点击事件
        $('.pagination a').on('click', function(e) {
            e.preventDefault();
            var url = $(this).attr('href');
            window.location.href = url;
        });
        // 处理留言提交
        document.getElementById('contactForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为
            const formData = new FormData(this)

            axios.post('{{ url('home/contact_form') }}', formData, {
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                    }
                })
                .then(response => {
                    if (response.data.success) {
                        showAlert(error.data.success, 'success')
                        this.reset(); // 清空表单
                    } else {
                        alert('发生未知错误，请稍后再试！');
                    }
                })
                .catch(error => {
                    if (error.response) {
                        // 服务器返回错误信息
                        showAlert(error.response.data.error, 'warning')
                    } else {
                        alert('网络错误，请检查您的网络连接！');
                    }
                });
            // .finally(() => {...}) 无论成功还是失败都会执行。

        });
        // 发送验证码方法
        document.getElementById('send-code-btn').addEventListener('click', function() {
            const email = document.querySelector('input[name="email"]').value;
            if (!email) {
                // alert('请填写邮箱地址！')
                // 修改提示，四种状态success info warning danger 
                showAlert('请输入邮箱地址', 'warning')
                return
            }
            axios.post('{{ url('home/sendVerificationCode') }}', {
                    email: email
                }, {
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                })
                .then(response => {

                })

                .catch(error => {

                });
        });

        // 提示框方法
        function showAlert(message, type) {
            const alertBox = document.createElement('div');
            alertBox.className = `alert alert-${type} alert-dismissible fade show`;
            alertBox.role = 'alert';
            alertBox.innerHTML = `
            <span class="alert-inner--icon"><i class="fas fa-exclamation"></i></span>
            <span class="alert-inner--text"><strong>${type.toUpperCase()}!</strong> ${message}</span>
            <button type="button" class="undo" aria-label="Undo">Undo</button>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>`;
            document.body.appendChild(alertBox);

            setTimeout(() => {
                $(alertBox).alert('close');
            }, 5000); // 5秒后自动关闭
        }
    </script>
@endpush
